---
id: statusbar
title: StatusBar
description: A library that provides the same interface as the React Native StatusBar API, but with slightly different defaults to work great in Expo environments.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-49/packages/expo-status-bar'
packageName: 'expo-status-bar'
iconUrl: '/static/images/packages/expo-status-bar.png'
---

import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import PlatformsSection from '~/components/plugins/PlatformsSection';
import { SnackInline } from '~/ui/components/Snippet';

`expo-status-bar` gives you a component and imperative interface to control the app status bar to change its text color, background color, hide it, make it translucent or opaque, and apply animations to any of these changes. Exactly what you are able to do with the `StatusBar` component depends on the platform you're using.

<PlatformsSection android emulator ios simulator web />

> **Web support**
>
> There is no API available on the web for controlling the operating system status bar, so `expo-status-bar` will noop, so it will do nothing, it will also **not** error.

## Installation

<APIInstallSection />

## Usage

<SnackInline dependencies={["expo-status-bar"]}>

```js
import React from 'react';
import { Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

const App = () => (
  <View
    style={{
      flex: 1,
      backgroundColor: '#000',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    <Text style={{ color: '#fff' }}>Notice that the status bar has light text!</Text>
    <StatusBar style="light" />
  </View>
);

export default App;
```

</SnackInline>

## API

```js
import { StatusBar } from 'expo-status-bar';
```

<APISection packageName="expo-status-bar" apiName="StatusBar" />
